<template>
	<view class="page">
		<image class="bg" :src="imgBaseUrl+'/images/mine/bg.png'" mode="widthFix" style="" ></image>
		<view class="pageContent">
			<view class="topBox">
				<image class="cover" v-if="selectInfoAccount.photo" :src="imgBaseUrl3+selectInfoAccount.photo" mode="aspectFit" style="" ></image>
				<image class="cover" style="border-radius: 50%;" v-else :src="imgBaseUrl+'/images/mine/account.png'" mode=""  ></image>
				<view class="name">{{selectInfoAccount.name}}</view>
				<view class="btn" @click="goPage('/pages/componentsA/switchBind/switchBind')">
					{{language.mine.changAccount}}
				</view>
			</view>
			<view class="moneyItem">
				<view class="money">
					<!-- <text>{{language.mine.balance}}</text>￥{{countMoneyObj.accountBalance + countMoneyObj.subsidyBalance | handledMoney}} -->
					<view class="">
						<text>{{language.mine.balance}}</text>￥{{countMoneyObj.accountBalance | handledMoney}} 
					</view>
					<view class="">
						<text>{{language.mine.subsidyBalance}}</text>￥{{countMoneyObj.subsidyBalance | handledMoney}} 
					</view>
				</view>
			</view>
			
			<view class="infoItem">
				<view class="info" v-for="(item,index) in infoItem" :key="index">
					<image :src="item.icon" mode="widthFix"></image>
					<text>{{item.label}} {{item.val?item.val: '--'}}</text>
				</view>
			</view>
			
			<view class="handleBox">
				<view class="handleItem" @click="goPage('/pages/componentsB/faceRegister/faceRegister')">
					<view class="cover">
						<u-image :showLoading="true" shape="circle" :src="imgBaseUrl+'/images/phone/item3.png'" width="80rpx" height="80rpx"></u-image>
					</view>
					<text>{{language.mine.item1}}</text>
					<u-icon name="arrow-right" color="#0072e5"></u-icon>
				</view>
				<view class="handleItem" @click="goPage('/pages/componentsA/setting/setting')">
					<view class="cover">
						<u-image :showLoading="true" shape="circle" :src="imgBaseUrl+'/images/mine/set.png'" width="80rpx" height="80rpx"></u-image>
					</view>
					<text>{{language.mine.item2}}</text>
					<u-icon name="arrow-right"  color="#0072e5"></u-icon>
				</view>
				<view class="handleItem" @click="goPage('/pages/componentsA/bingInfo/agreement')">
					<view class="cover">
						<u-image :showLoading="true" shape="circle" :src="imgBaseUrl+'/images/mine/privacy.png'" width="80rpx" height="80rpx"></u-image>
					</view>
					<text>{{language.mine.item3}}</text>
					<u-icon name="arrow-right" color="#0072e5"></u-icon>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	function deepCopy(obj){
		return JSON.parse(JSON.stringify(obj))
	}
	import {reqRechargeApi,countAmtApi} from '@/common/api/commonApi/consumeApi.js'
	import {getPersonApi,} from '@/common/api/commonApi/commonApi.js'
	import base from '@/common/config'
	export default {
		data() {
			return {
				pageItem:[],
				infoItem:[
					{
						icon: base.imgBaseUrl+'/images/mine/card.png',
						label: '',
						val: '--'
					},
					{
						icon: base.imgBaseUrl+'/images/mine/dept.png',
						label: '',
						val: '--'
					},
					{
						icon: base.imgBaseUrl+'/images/mine/name.png',
						label: '',
						val: '--'
					},
					{
						icon: base.imgBaseUrl+'/images/mine/tel.png',
						label: '',
						val: '--'
					},
				],
				selectInfoAccount : '',
				countMoneyObj:{
					accountBalance : '',
					subsidyBalance : '',
				},
				merchArr:[[]],
				selectMerchShow: false,
				isTeacher : 2,
			}
		},
		methods: {
			selectConfirm(e){
				console.log(e);
				let merchNo = e.value[0].id
				this.selectMerchShow = false
				this.goPage('/pages/componentsC/dingcanMan/dingcanMan',{
					merchNo
				})
			},
			getMerch(){
				queryMerchApi().then(res=>{
					res.data.forEach(item=>{
						let obj = {
							label : item.merch_name,
							id : item.merch_no,
						}
						this.merchArr[0].push(obj)
					})
					// this.merchArr[0] = res.data
					console.log(this.merchArr);
				})
			},
			getCountMoney(){
				return countAmtApi().then(res=>{
					this.countMoneyObj = res.result
				})
			},
			bindAccount(){
				uni.showModal({
					content: '暂未绑定账号信息，是否进行绑定',
					success: (res) => {
						if(res.confirm){
							this.goPage('/pages/componentsA/bingInfo/bingInfo')
						}
					}
				})
			},
			handleGoPage(url){
				let info = uni.getStorageSync('selectInfoAccount')
				if(!info){
					this.bindAccount()
				}else{
					if(url=='/pages/componentsC/dingcanMan/dingcanMan'){
						this.selectMerchShow = true
					}else if(url=='/pages/componentsC/dingcanMan/cancelOrder' || url=='/pages/componentsC/dropClass/dropClassList'){
						// 退餐记录
						let isTeacher = this.isTeacher
						this.goPage(url,{isTeacher})
					}else{
						this.goPage(url)
					}
				}
			},
			getRemberInfo(){
				let selectInfoAccount = uni.getStorageSync('selectInfoAccount')
				return getPersonApi({
					personId : selectInfoAccount.id ? selectInfoAccount.id : ''
				}).then(res=>{
					console.log(res);
					this.selectInfoAccount = res.result.personList[0]
					if(this.selectInfoAccount.positionList && this.selectInfoAccount.positionList.length){
						this.isTeacher = 1 
					} else{
						this.isTeacher = 2
					}
					uni.setStorageSync('selectInfoAccount',this.selectInfoAccount)
					this.infoItem[0].val = this.selectInfoAccount.code
					this.infoItem[1].val =   this.selectInfoAccount.departName
					this.infoItem[2].val = this.selectInfoAccount.name
					this.infoItem[3].val = this.selectInfoAccount.phone
					uni.setStorageSync('token',res.result.token)
				}).catch(err=>{
					console.log(err);
					if(err.code==500 && err.message == '该微信没有绑定'){
						this.bindAccount()
					}
				})
			}
		},
		onLoad() {
			// this.getMerch()
		},
		async onShow() {
			this.setPageTitle(this.language.mine.title)
			await this.getRemberInfo()
			this.getCountMoney()
		},
	}
</script>

<style lang="scss" scoped>
	.topBox{
		width: 690rpx;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		margin-bottom: 25rpx;
		position: relative;
		.cover{
			height: 150rpx;
			width: 150rpx;
			margin: 60rpx 0 30rpx;
			box-shadow: 0px 0px 10px 3px rgba(108, 108, 108, 0.9);
			// border: 2px solid #5a92b9;
			// box-shadow: 0px 0px 20px 0px rgba(102, 102, 102, 0.05);
		}
		.name{
			flex: 1;
			// padding-left: 200rpx;
			// text-align: center;
			// font-weight: 600;
			color: #fff;
			font-size: 40rpx;
		}
		.btn{
			position: absolute;
			top: 5%;
			right: 0;
			border: 2rpx solid #fff;
			border-radius: 30rpx;
			padding: 8rpx 20rpx;
			font-size: 26rpx;
			color: #fff;
			// background-color: #d8eaf6;
		}
	}
	
	.handleBox{
		.handleItem{
			&:nth-child(1){
				border-bottom: 2rpx solid #f1f1f1;
			}
			background: #fff;
			box-shadow: 0px 0px 20px 0px rgba(102, 102, 102, 0.05);
			margin: 30rpx auto 0;
			border-radius: 20rpx;
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 0 50rpx;
			text{
				flex: 1;
				margin-left: 50rpx;
			}
		}
		
	}
	
	.moneyItem{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 160rpx;
		width: 690rpx;
		box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
		border: 2rpx solid #f1f1f1;
		margin-bottom: 40rpx;
		border-radius: 75rpx;
		background:  linear-gradient(to right, #055aca, #04ccc1);
		.money{
			color: #fff;
			font-size: 36rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			height: 100%;
			text{
				font-weight: 600;
			}
		}
	}
	
	
.page{
	background-color: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	.bg{
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.pageContent{
		position: relative;
		z-index: 10;
	}
	
	
	.infoItem{
		width: 690rpx;
		// margin-top: -200rpx;
		border-radius: 10px;
		margin-bottom: 20rpx;
		display: flex;
		position: relative;
		z-index: 10;
		background-color: #fff;
		border: 2rpx solid #f1f1f1;
		height: 200rpx;
		box-shadow: 0px 0px 20px 0px rgba(102, 102, 102, 0.05);
		.info{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			height: 100%;
			image{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			text{
				color: #000;
				font-size: 24rpx;
			}
		}
		
	}
	
	.pageItem{
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		background-color: #fdfdfd;
		padding-bottom: 50rpx;
		padding-top: 20rpx;
		.item{
			margin: 10rpx 20rpx;
			height: 200rpx;
			width: 44%;
			padding: 15rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0px 0px 20px 0px rgba(102, 102, 102, 0.1);
			image{
				width: 80rpx;
				height: 80rpx;
				// margin-right: 20rpx;
			}
			text{
				color: #282d33;
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}
	
	
}
</style>
